// 导入React中的ChangeEvent类型和useState钩子
import { type ChangeEvent, useState } from 'react';
// 导入react-spinners库中的CircleLoader组件，用于加载动画
import { CircleLoader } from 'react-spinners';
// 导入自定义的insertDocument函数，用于上传文档
import insertDocument from '../apis/insertDocument';

// 定义HTMLInputEvent接口，继承自ChangeEvent，并指定target类型
interface HTMLInputEvent extends ChangeEvent {
  target: HTMLInputElement & EventTarget;
}
// 定义DocumentUploader组件的props类型
type DocumentUploaderProps = {
  setRefreshViewer: (refresh: boolean) => void;
};
// 定义DocumentUploader组件
const DocumentUploader = ({ setRefreshViewer }: DocumentUploaderProps) => {
  // 定义selectedFile状态，存储用户选择的文件
  const [selectedFile, setSelectedFile] = useState<File>();
  // 定义isFilePicked状态，标记是否已选择文件
  const [isFilePicked, setIsFilePicked] = useState(false);
  // 定义isLoading状态，标记是否正在上传
  const [isLoading, setIsLoading] = useState(false);

  // 文件选择事件处理函数
  const changeHandler = (event: HTMLInputEvent) => {
    // 判断event.target和event.target.files是否存在
    if (event.target && event.target.files) {
      // 设置selectedFile为用户选择的第一个文件
      setSelectedFile(event.target.files[0]);
      // 标记已选择文件
      setIsFilePicked(true);
    }
  };

  // 文件提交处理函数
  const handleSubmission = () => {
    // 如果已选择文件
    if (selectedFile) {
      // 设置加载状态为true
      setIsLoading(true);
      // 调用insertDocument上传文件
      insertDocument(selectedFile).then(() => {
        // 刷新viewer
        setRefreshViewer(true);
        // 上传完成后重置selectedFile
        setSelectedFile(undefined);
        // 重置文件选择状态
        setIsFilePicked(false);
        // 关闭加载动画
        setIsLoading(false);
      });
    }
  };

  // 组件渲染部分
  return (
    <div>
      {/* 文件输入框，接受pdf、txt、json、md格式文件，绑定changeHandler */}
      <input
        type='file'
        name='file-input'
        id='file-input'
        accept='.pdf,.txt,.json,.md'
        onChange={changeHandler}
      />
      {/* 文件上传标签，点击可触发文件选择 */}
      <label htmlFor='file-input'>
        Upload file
      </label>

      {/* 显示已选择的文件名，否则提示选择文件 */}
      <div>
        {isFilePicked && selectedFile ? selectedFile.name : 'Select a file to insert'}
      </div>

      {/* 如果已选择文件且未加载，显示提交按钮 */}
      {isFilePicked && !isLoading && (
        <button onClick={handleSubmission}>
          Submit
        </button>
      )}
      {/* 如果正在加载，显示加载动画 */}
      {isLoading && <CircleLoader />}
    </div>
  );
};

// 导出DocumentUploader组件
export default DocumentUploader;
